<!DOCTYPE html>
<html>

  <head>
  </head>

  <body>
    <div>
      <div class="tabButtons">
        <div class="tabButton documentationTabButton active" onclick="$('.tabWrapper').removeClass('active'); $('.documentationWrapper').addClass('active'); $('.tabButton').removeClass('active'); $('.documentationTabButton').addClass('active'); $('#fancybox-content > div').scrollTop(0);">
          <div class="tabButtonWrapper">Documentation</div>
        </div>

        <div class="tabButton buyTutorialCDETabButton" onclick="$('.tabWrapper').removeClass('active'); $('.buyTutorialCDEWrapper').addClass('active'); $('.tabButton').removeClass('active'); $('.buyTutorialCDETabButton').addClass('active'); $('#fancybox-content > div').scrollTop(0);">
          <div class="tabButtonWrapper">CDE Tutorial</div>
        </div>

        <div class="tabButton buySamplesTabButton" onclick="$('.tabWrapper').removeClass('active'); $('.buySamplesWrapper').addClass('active'); $('.tabButton').removeClass('active'); $('.buySamplesTabButton').addClass('active'); $('#fancybox-content > div').scrollTop(0);">
          <div class="tabButtonWrapper">CDE Open Demos</div>
        </div>

        <div class="tabButton buyTutorialCDFTabButton" onclick="$('.tabWrapper').removeClass('active'); $('.buyTutorialCDFWrapper').addClass('active'); $('.tabButton').removeClass('active'); $('.buyTutorialCDFTabButton').addClass('active'); $('#fancybox-content > div').scrollTop(0);">
          <div class="tabButtonWrapper">CDF Tutorial</div>
        </div>
      </div>

      <div class="wrapper">
        <!--  DOCUMENTATION -->
        <div class="tabWrapper documentationWrapper active">
          <div class="content">
            <div class="bodycopydiv">
              <ul class="bodycopy">
                <li>
                  <ul class="bodycopylist">
                    <li class="list-image"><img id="cdeimg"></li>
                  </ul>
                </li>

                <li></li>

                <li>
                  <div class="downloadstut"></div>
                </li>
              </ul>

              <!-- Row 1 -->
              <ul class="bodycopy" style="margin-top:10px;">
                <li>
                  <div class="bodycopytitle">
                    <h29>OVERVIEW </h29>
                  </div>
                </li>

                <!-- Column 1.1 -->
                <li>
                  <ul class="bodycopylist">
                    <li>
                      The Community Dashboard Editor (CDE), which is integrated in the Pentaho User Console (PUC), is a graphical tool for creating, editing and previewing Pentaho dashboards, , contributed and maintained by Hitachi Vantara.
                    </li>
                    <li>
                      Have fun, dazzle your clients and build a "masterpiece of a Dashboard".
                    </li>
                  </ul>
                </li>

                <!-- Column 1.2 -->
                <li>
                  <ul class="bodycopylist">
                    <li>
                      <b> Create: </b> The Files and settings menu allows you to create, save and rename dashboards.
                    </li>
                    <li>
                      <b> Preview: </b> The Preview option is the shortcut for testing the L&F and behavior of your dashboard as you are working.
                    </li>
                  </ul>
                </li>

                <!-- Column 1.3 -->
                <li>
                  <ul class="bodycopylist">
                    <li>
                      <b> Layout: </b> For designing the layout of your dashboard, from scratch or from a template, you can apply styles and add HTML elements.
                    </li>
                    <li>
                      <b> Components: </b> For adding and configuring the different visual components that make up your dashboard.
                    </li>
                    <li>
                      <b> Data Sources: </b> For defining the data sources used by the components.
                    </li>
                  </ul>
                </li>
              </ul>

              <!-- Row 2 -->
              <ul class="bodycopy">
                <li>
                  <div class="bodycopytitle">
                    <h29> SOME REFERENCES </h29>
                  </div>
                </li>

                <!-- Column 2.1 -->
                <li>
                  <ul class="bodycopylist">
                    <li class="bodysubtitle">
                      Social media
                    </li>
                    <li>
                      Visit <a target="_blank" href="http://www.hitachivantara.com"> our web page </a> to know us better
                    </li>
                    <li>
                      Keep an eye and make a like on <a target="_blank" href="http://www.facebook.com/HitachiVantara"> our facebook page</a> and keep some news up to date! Here you can follow our news.
                    </li>
                  </ul>
                </li>

                <!-- Column 2.2 -->
                <li>
                  <ul class="bodycopylist">
                    <li class="bodysubtitle"> </li>
                    <li>
                      Get the other eye on <a target="_blank" href="http://pedroalves-bi.blogspot.pt"> Pedro Alves on Business Intelligence</a> blog. Pedro Alves is the founder of Webdetails and his blog will keep you updated on news  underlying technology related to Business Intelligence, Ctools, Pentaho and others.
                    </li>
                    <li>
                      Follow <a target="_blank" href="https://twitter.com/hitachivantara"> us at twitter</a>.
                    </li>
                  </ul>
                </li>

                <!-- Column 2.3 -->
                <li>
                  <ul class="bodycopylist">
                    <li class="bodysubtitle">
                      Do you need help?
                    </li>
                    <li>
                      You can always get to the <a target="_blank" href="https://community.hitachivantara.com/s/topic/0TO1J0000017kVNWAY/ctools"> Community Tools - CTools </a> in Hitachi Vantara.
                    </li>
                    <li class="bodysubtitle">
                      Collaborative development
                    </li>
                    <li>
                      Keep up date with our version control system at <a target="_blank" href="https://github.com/webdetails"> GitHub </a>.
                    </li>
                  </ul>
                </li>
              </ul>

              <!-- Row 3 -->
              <ul class="bodycopy">
                <li>
                  <div class="bodycopytitle">
                    <h29> EXTERNAL REFERENCES </h29>
                  </div>
                </li>

                <!-- Column 3.1 -->
                <li>
                  <ul class="bodycopylist">
                    <li class="bodysubtitle">
                      HTML, CSS and JS
                    </li>

                    <li>
                      A CDE Dashboard is an HTML Page! It is not necessary to be a professional web-developer to create fascinating dashboards with CDE, a certain basic knowledge of web-technologies will help to achieve greater results, but if you know well some other tools and languages then you will improve your results:
                    </li>
                    <li>
                      <a target="_blank" href="http://www.w3schools.com/html">HyperText Markup Language (HTML)</a>
                    </li>
                    <li>
                      <a target="_blank" href="http://www.w3schools.com/css">Cascading Style Sheets (CSS)</a>
                    </li>
                    <li>
                      <a target="_blank" href="http://www.w3schools.com/jsref">JavaScript (JS)</a>
                    </li>
                    <li>
                      <a target="_blank" href="http://jquery.com">jQuery JavaScript general purpose library</a>
                    </li>
                  </ul>
                </li>

                <!-- Column 3.2 -->
                <li>
                  <ul class="bodycopylist">
                    <li class="bodysubtitle">
                      Plugins & libraries
                    </li>

                    <li>
                      <a target="_blank" href="http://www.blueprintcss.org">Blueprint</a> is a CSS framework, which aims to cut down on your development time. It gives you a solid foundation to build your project on top of, with an easy-to-use grid, sensible typography, useful plugins, and even a stylesheet for printing.
                    </li>
                    <li>
                      <a target="_blank" href="http://mbostock.github.com/protovis/">Protovis</a> uses JavaScript and SVG for web-native visualizations.
                    </li>
                    <li>
                      <a target="_blank" href="http://datatables.net/">Datatables</a> is a plug-in for the jQuery Javascript library. It is a highly flexible tool, based upon the foundations of progressive enhancement, which will add advanced interaction controls to any HTML table.
                    </li>
                  </ul>
                </li>

                <!-- Column 3.3 -->
                <li>
                  <ul class="bodycopylist">
                    <li class="bodysubtitle"></li>
                    <li>
                      <a target="_blank" href="http://omnipotent.net/jquery.sparkline/">Sparklines</a> is a jQuery plugin for generating sparklines (small inline charts) directly in the browser using data supplied either inline in the HTML, or via javascript.
                    </li>
                    <li>
                      <a target="_blank" href="http://harvesthq.github.com/chosen/">Chosen</a> is a JavaScript plugin that makes long, unwieldy select boxes much more user-friendly. It is currently available in both jQuery and Prototype flavors.
                    </li>
                  </ul>
                </li>
              </ul>
            </div>

            <div class="cfooter">
              <ul class="cfooterlist">
                <li class="linkto">
                  <a target="_blank" href="https://community.hitachivantara.com/s/topic/0TO1J0000017kVNWAY/ctools">CDE on Hitachi Vantara Forum <img class="link_img"></a>
                </li>
                <li class="linkto">
                  <a target="_blank" href="https://github.com/webdetails/cde">CDE on Github <img class="link_img"></a>
                </li>
                <li class="linkto">
                  <a target="_blank" href="https://community.hitachivantara.com/s/article/community-dashboard-editor/">CDE Microsite <img class="link_img"></a>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <!--  CLOSE DOCUMENTATION  -->

        <!--  CDE TUTORIAL -->
        <div class="tabWrapper buyTutorialCDEWrapper">
          <div class="content">
            <div class="bodycopydiv">
              <ul class="bodycopy">
                <li>
                  <ul class="bodycopylist">
                    <li class="list-image"><img id="cdetutimg"></li>
                  </ul>
                </li>
                <li></li>
                <li>
                  <div class="downloadstut">
                    <a target="_blank" href="https://hdscorp.force.com/Community/s/article/cde-tutorial">Buy CDE Tutorial</a>
                  </div>
                </li>
              </ul>

              <ul class="bodycopy" style="margin-top:10px;">
                <li>
                  <div class="bodycopytitle">
                    <h29>OVERVIEW </h29>
                  </div>
                </li>

                <!-- COLUNA 1 -->
                <li>
                  <ul class="bodycopylist">
                    <li>
                      CDE is the Dashboard editor created and used everyday by the Hitachi Vantara team.<br><br>
                    </li>
                  </ul>
                </li>

                <!-- COLUNA 2-->
                <li>
                  <ul class="bodycopylist">
                    <li>
                      This Tutorial provides the essential knowledge for you to take full advantage of CDE and start building your own CTools Dashboards. <br>
                    </li>
                  </ul>
                </li>

                <!-- COLUNA 3 -->
                <li>
                  <ul class="bodycopylist">
                    <li>
                      The content has been carefully selected by the CDE dev team itself, guiding you cleanly through the key aspects of CDE. <br>
                    </li>
                  </ul>
                </li>
              </ul>

              <ul class="bodycopy">
                <li>
                  <div class="bodycopytitle">
                    <h29>TUTORIAL CONTENT </h29>
                  </div>
                </li>

                <!-- COLUNA Abaixo 1 -->
                <li>
                  <ul class="bodycopylist">
                    <li class="bodysubtitle">Introduction</li>
                    <li>The CDE Interface.</li>
                    <li class="bodysubtitle">First Dashboard</li>
                    <li>A simple one-chart dashboard.</li>
                    <li>Adding more charts. </li>
                    <li>Reacting to parameters. </li>
                    <li>Making the charts talk to each other. </li>
                  </ul>
                </li>

                <!-- COLUNA Abaixo 2 -->
                <li>
                  <ul class="bodycopylist">
                    <li class="bodysubtitle">Core Concepts</li>
                    <li>Understanding layout engine. </li>
                    <li>Adding external resources. </li>
                    <li>CCC Grand Tour - Configuring data sets. </li>
                    <li>CCC Grand Tour - Enhancing charts. </li>
                    <li>CCC Grand Tour - Extensions points. </li>
                    <li>Using calculated columns. </li>
                    <li>Understand CDA editor. </li>
                    <li>Creating tables. </li>
                    <li>Using table add-in. </li>
                  </ul>
                </li>

                <!-- COLUNA Abaixo 3 -->
                <li>
                  <ul class="bodycopylist">
                    <li class="bodysubtitle">Advanced Topics</li>
                    <li>Creating components. </li>
                    <li>Creating Add-Ins. </li>
                    <li>Getting the most out of CDA. </li>
                  </ul>
                </li>
              </ul>

              <!-- COLUNA 4 -->
              <ul class="bodycopy">
                <li>
                  <div class="bodycopytitle">
                    <h29>PURCHASE TERMS </h29>
                  </div>
                </li>

                <li>
                  <ul class="bodycopylist">
                    <li>Receive the installer by email within 24 hours.</li>
                    <li>Have the source, so that you can see how everything is built. </li>
                  </ul>
                </li>
                <li>
                  <ul class="bodycopylist">
                    <li>Get free updates made to the tutorial for the period of 1 year from the date of purchase.</li>
                    <li>Contribute to open-source development effort. </li>
                  </ul>
                </li>
                <li>
                  <ul class="bodycopylist">
                    <li>Full refund guarantee if you"re not happy with the purchased item.</li>
                  </ul>
                </li>
              </ul>

              <!-- COLUNA 5 -->
              <ul class="bodycopy">
                <li>
                  <div class="bodycopytitle">
                    <h29>SCREENSHOTS </h29>
                  </div>
                </li>

                <li style="padding-top:10px;">
                  <img id="cdesample1">
                </li>
                <li style="padding-top:10px;">
                  <img id="cdesample2">
                </li>
                <li style="padding-top:10px;">
                  <img id="cdesample3">
                </li>
              </ul>
            </div>

            <div class="cfooter">
              <ul class="cfooterlist">
                <li class="linkto"><a target="_blank" href="https://community.hitachivantara.com/s/topic/0TO1J0000017kVNWAY/ctools">CDE on Hitachi Vantara Forum <img class="link_img"></a></li>
                <li class="linkto"><a target="_blank" href="https://github.com/webdetails/cde">CDE on Github <img class="link_img"></a></li>
                <li class="linkto"><a target="_blank" href="https://community.hitachivantara.com/s/article/community-dashboard-editor/">CDE Microsite <img class="link_img"></a></li>
              </ul>
            </div>
          </div>
        </div>
        <!--  CLOSE CDE TUTORIAL  -->

        <!--  CDE SAMPLES  -->
        <div class="tabWrapper buyTutorialCDFWrapper">
          <div class="content">
            <div class="bodycopydiv">
              <ul class="bodycopy">
                <li>
                  <ul class="bodycopylist">
                    <li class="list-image"><img id="CdfTutorialImg"></li>
                  </ul>
                </li>

                <li></li>
                <li>
                  <div class="downloadstut" style="font-size:20px;">
                    <a target="_blank" href="https://hdscorp.force.com/Community/s/article/cdf-tutorial">Buy CDF Tutorial</a>
                  </div>
                </li>
              </ul>

              <ul class="bodycopy" style="margin-top:-10px;">
                <li>
                  <div class="bodycopytitle">
                    <h29>OVERVIEW </h29>
                  </div>
                </li>

                <!-- COLUNA 1 -->
                <li>
                  <ul class="bodycopylist">
                    <li>The Community Dashboard Framework (CDF) is a project that provides an easy to use and powerful dashboard framework on top of the Pentaho BI server. <br><br>
                  </li>
                  </ul>
                </li>

                <!-- COLUNA 2-->
                <li>
                  <ul class="bodycopylist">
                    <li>
                      As the main developers of this community project, we understand that sometimes is not easy to achieve exactly what we want. <br>
                    </li>
                  </ul>
                </li>

                <!-- COLUNA 3 -->
                <li>
                  <ul class="bodycopylist">
                    <li>
                      To allow users to get the full benefit of CDF we"ve prepared a set of documentation - a step by step tutorial from "how to start" to the hidden features of this framework. <br>
                    </li>
                  </ul>
                </li>
              </ul>

              <!-- COLUNA Abaixo 1 -->
              <ul class="bodycopy">
                <li>
                  <div class="bodycopytitle">
                    <h29>TUTORIAL CONTENT </h29>
                  </div>
                </li>

                <li>
                  <ul class="bodycopylist">
                    <li class="bodysubtitle">How to Start</li>
                    <li>What files to create and what their contents should be.</li>
                    <li class="bodysubtitle">First Dashboard</li>
                    <li>How to select values and how to return them - use them as parameters. </li>
                    <li class="bodysubtitle">Parametrization</li>
                    <li>Make your reports look good.</li>
                  </ul>
                </li>

                <!-- COLUNA Abaixo 2 -->
                <li>
                  <ul class="bodycopylist">
                    <li class="bodysubtitle">Permissions</li>
                    <li>How to segregate the data being viewed by collaborators with different profiles. </li>
                    <li class="bodysubtitle">Charts</li>
                    <li>Present your data in several formats.</li>
                    <li class="bodysubtitle">Templates</li>
                    <li>Change the way your dashboards look.</li>
                    <li class="bodysubtitle">Time Series</li>
                    <li>Interact with time based charts. </li>
                  </ul>
                </li>

                <!-- COLUNA Abaixo 3 -->
                <li>
                  <ul class="bodycopylist">
                    <li class="bodysubtitle">
                    Geo-based Dashboards</li>
                    <li>How to use maps to make your information richer. </li>
                    <li class="bodysubtitle">Gauges and traffic lights</li>
                    <li>Real time view over your business. </li>
                    <li class="bodysubtitle">Tables and Sparklines</li>
                    <li>Build visually pleasing tables. </li>
                    <li class="bodysubtitle">Interactive dashboards</li>
                    <li>Freely explore your data. </li>
                  </ul>
                </li>
              </ul>

              <!-- COLUNA 4 -->
              <ul class="bodycopy">
                <li>
                  <div class="bodycopytitle">
                    <h29>PURCHASE TERMS </h29>
                  </div>
                </li>

                <li>
                  <ul class="bodycopylist">
                    <li>Receive the installer by email within 24 hours.</li>
                    <li>Have the source, so that you can see how everything is built. </li>
                  </ul>
                </li>
                <li>
                  <ul class="bodycopylist">
                    <li>Get free updates made to the tutorial for the period of 1 year from the date of purchase.</li>
                    <li>Contribute to open-source development effort. </li>
                  </ul>
                </li>
                <li>
                  <ul class="bodycopylist">
                    <li>Full refund guarantee if you"re not happy with the purchased item.</li>
                  </ul>
                </li>
              </ul>

              <!-- COLUNA 5 -->
              <ul class="bodycopy">
                <li>
                  <div class="bodycopytitle">
                    <h29>SCREENSHOTS </h29>
                  </div>
                </li>

                <li style="padding-top:10px;">
                  <img id="cdfsample1">
                </li>
                <li style="padding-top:10px;">
                  <img id="cdfsample2">
                </li>
                <li style="padding-top:10px;">
                  <img id="cdfsample3">
                </li>
              </ul>
            </div>

            <div class="cfooter">
              <ul class="cfooterlist">
                <li class="linkto"><a target="_blank" href="https://community.hitachivantara.com/s/topic/0TO1J0000017kVNWAY/ctools">CDF on Hitachi Vantara Forum <img class="link_img"></a></li>
                <li class="linkto"><a target="_blank" href="https://github.com/webdetails/cdf">CDF on Github <img class="link_img"></a></li>
                <li class="linkto"><a target="_blank" href="https://community.hitachivantara.com/s/article/community-dashboard-editor/">CDE Microsite <img class="link_img"></a></li>
              </ul>
            </div>
          </div>
        </div>
        <!--  CLOSE CDE SAMPLES   -->

        <!--  CDF TUTORIAL   -->
        <div class="tabWrapper buySamplesWrapper">
          <div class="content">
            <div class="bodycopydiv">
              <ul class="bodycopy">
                <li>
                  <ul class="bodycopylist">
                    <li class="list-image"><img id="cdesampleimg"></li>
                  </ul>
                </li>

                <li></li>
                <li>
                  <div class="downloadstut" style="font-size:20px;">
                    <a target="_blank" href="https://hdscorp.force.com/Community/s/article/open-demos">Buy CDE Open Demos</a>
                  </div>
                </li>
              </ul>

              <ul class="bodycopy" style="margin-top:-10px;">
                <li>
                  <div class="bodycopytitle">
                    <h29>OVERVIEW </h29>
                  </div>
                </li>

                <!-- COLUNA 1 -->
                <li>
                  <ul class="bodycopylist">
                    <li>
                      The Community Dashboard Editor Open Demos are a set of dashboards created by the team at Hitachi Vantara using CDE Editor. <br><br>
                    </li>
                  </ul>
                </li>

                <!-- COLUNA 2-->
                <li>
                  <ul class="bodycopylist">
                    <li>
                      As the main developers of this community project, we understand that sometimes is not easy to achieve exactly what we want. <br>
                    </li>
                  </ul>
                </li>

                <!-- COLUNA 3 -->
                <li>
                  <ul class="bodycopylist">
                    <li>
                      So we allow you to edit the dashboards and thus discover and learn the tricks and best practices that are behind each of these dashboards. <br>
                    </li>
                  </ul>
                </li>
              </ul>

              <ul class="bodycopysamples">
                <li class="title-item">
                  <div class="bodycopytitle">
                    <h29> WORK SAMPLES & FEATURES </h29>
                  </div>
                </li>

                <li>
                  <ul class="bodycopysampleslist">
                    <li class="bodysubtitle">S.Paulo, Brazil</li>
                    <li class="bodysubimg"> <img id="demo_spaulo"></img></li>
                    <li>Bar chats, line charts and table.</li>
                    <li>Selection allowing some interaction to change result visualization.</li>
                  </ul>
                </li>

                <li>
                  <ul class="bodycopysampleslist">
                    <li class="bodysubtitle">Orlando, USA</li>
                    <li class="bodysubimg"> <img id="demo_orlando"></img></li>
                    <li>A complete dashboard with a lot of features. </li>
                    <li>Table interacting for best use. </li>
                  </ul>
                </li>

                <li>
                  <ul class="bodycopysampleslist">
                    <li class="bodysubtitle">Welcome to the geek side</li>
                    <li class="bodysubimg"> <img id="demo_geek"></img></li>
                    <li>Advanced charts use with lots os customizations. </li>
                  </ul>
                </li>

                <li>
                  <ul class="bodycopysampleslist">
                    <li class="bodysubtitle">Product Sales</li>
                    <li class="bodysubimg"> <img id="demo_productsale"></img></li>
                    <li>Line charts and advanced features on tables.</li>
                    <li>Using addins in tables. </li>
                  </ul>
                </li>

                <li>
                  <ul class="bodycopysampleslist">
                    <li class="bodysubtitle">Utrecht, Netherlands</li>
                    <li class="bodysubimg"> <img id="demo_netherlands"></img></li>
                    <li>A lot of charts and a simple table.</li>
                    <li>For the beginner user .</li>
                  </ul>
                </li>
              </ul>

              <!-- COLUNA 4 -->
              <ul class="bodycopy">
                <li>
                  <div class="bodycopytitle">
                    <h29>PURCHASE TERMS </h29>
                  </div>
                </li>

                <li>
                  <ul class="bodycopylist">
                    <li>Receive the installer by email within 24 hours.</li>
                    <li>Have the source, so that you can see how everything is built. </li>
                  </ul>
                </li>
                <li>
                  <ul class="bodycopylist">
                    <li>Get free updates made to the samples for the period of 1 year from the date of purchase.</li>
                    <li>Contribute to open-source development effort. </li>
                  </ul>
                </li>
                <li>
                  <ul class="bodycopylist">
                    <li>Full refund guarantee if you"re not happy with the purchased item.</li>
                  </ul>
                </li>
              </ul>

              <ul class="bodycopy">
                <li>
                  <div class="bodycopytitle">
                    <h29>SCREENSHOTS</h29>
                  </div>
                </li>

                <li>
                  <ul class="bodycopylist">
                    <li class="list-image"><img id="cdedemo01"></li>
                  </ul>
                </li>

                <li>
                  <ul class="bodycopylist">
                    <li class="list-image"><img id="cdedemo02"></li>
                  </ul>
                </li>

                <li>
                  <ul class="bodycopylist">
                    <li class="list-image"><img id="cdedemo03"></li>
                  </ul>
                </li>
              </ul>
            </div>

            <div class="cfooter">
              <ul class="cfooterlist">
                <li class="linkto"><a target="_blank" href="https://community.hitachivantara.com/s/topic/0TO1J0000017kVNWAY/ctools">CDE on Hitachi Vantara Forum <img class="link_img"></a></li>
                <li class="linkto"><a target="_blank" href="https://github.com/webdetails/cde">CDE on Github <img class="link_img"></a></li>
                <li class="linkto"><a target="_blank" href="https://community.hitachivantara.com/s/article/community-dashboard-editor/">CDE Microsite <img class="link_img"></a></li>
              </ul>
            </div>
          </div>
        </div>
        <!--  CLOSE CDF TUTORIAL   -->
      </div>
    </div>
  </body>
</html>
